* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  width: 100%;
  height: 100%;

  //右侧导航栏区域
  .left {
    width: 200px;
    height: 580px;
    border-right: 2px solid #ddd;

    .nav {
      width: 100%;
      ul {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        list-style: none;

        li {
          display: flex;
          justify-content: space-evenly;
          width: 130px;
          height: 40px;
          line-height: 40px;
          margin: 20px;
          text-align: center;
          border-radius: 10px;
          cursor: pointer;

          .el-icon {
            height: 40px;
            line-height: 40px;
            font-size: 15px;
          }

          &:hover {
            background-color: #dddddd;
          }

          &.active {
            color: #004B90;
            font-weight: bold;
            background-color: rgba(0, 128, 246, 0.1);
            transition: all .3s ease-in-out;
          }

        }
      }
    }
  }
  // 左侧内容区域
  .right {
    width: 100%;
    height: 100%;
  }
}
